<script setup lang="ts">
import {useUserPinia} from '~/stores/user'
import {storeToRefs} from "pinia";
import {onMounted, ref} from "vue";
import home_2048 from "~/public/shop/AP_memorial_day_sale_BANNERSv2-01_2048x2048.webp"
import home_800 from "~/public/shop/AP_memorial_day_sale_BANNERSv2-02_800x.webp"
import photo_image1 from "~/public/shop/Photo/0802dfa7291d4ad9701a.jpg"
import photo_image2 from "~/public/shop/Photo/273827455_10160367429837668_8648767521590626263_n.webp"
import photo_image3 from "~/public/shop/Photo/__ashleywalseman.webp"
import photo_image4 from "~/public/shop/Photo/__becominghomebody.webp"
import photo_image5 from "~/public/shop/Photo/__emilywondree.webp"
import photo_image6 from "~/public/shop/Photo/__emilywondree2.webp"
import photo_image7 from "~/public/shop/Photo/__glamorouslyliving_.webp"
import photo_image8 from "~/public/shop/Photo/__halfwaywholeistic_.webp"
import photo_image9 from "~/public/shop/Photo/__johnston.designs_.jpeg"
import photo_image10 from "~/public/shop/Photo/_decoratingnewbuild__.webp"
import photo_image11 from "~/public/shop/Photo/_jamiesyang.webp"
import photo_image12 from "~/public/shop/Photo/d09ec57756e08dd0ed21.jpg"
import HP5050 from "~/public/shop/HP5050_banner-Lido_03_Ivory_Boucle_1011-992x1120_672x448.webp"

// 用tm代替t，因为tm是响应式的而且可以解析对象
const {locale, setLocale, tm} = useI18n()
const userStore = useUserPinia()
const {token, rating_five} = storeToRefs(userStore);

import Player from "xgplayer";
import "xgplayer/dist/index.min.css";

onMounted(() => {
  new Player({
    id: "mse", //元素id
    lang: "zh", //设置中文
    volume: 0, // 默认静音
    autoplay: false, //自动播放
    screenShot: true, // 开启截图功能

    //视频地址
    url: "https://cdn.free-stock.video/25122023/abstract-curve-chaos-paint-ink-that-design-91614-small.mp4",

    //封面图
    poster:
        "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
    fluid: true, // 填满屏幕 （流式布局）
    playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
  });
});
/**
 * 屏幕尺寸
 */
const screenSize = ref({width: 0, height: 0});

/**
 * 图片是否加载完成
 */
const home_image1_load = ref(false)

/**
 * 获取组元素组件的宽度
 */
const getGroupWidth: any = computed(() => {
  if (screenSize.value.width > 1470) {
    return 1440;
  } else if (screenSize.value.width > 1008) {
    return 1000;
  } else {
    return 560;
  }
})


/**
 * 响应式i18n
 */
const image_icons = computed(() => {
  return tm("shop.body.choose.shopIcons");
})

const style_images = computed(() => {
  return tm("shop.body.choose.shopList")
})
const qualityIcons = computed(() => {
  return tm("shop.body.qualityIcons")
})
const buyers = computed(() => {
  return tm("shop.body.buyer")
})
const populars = computed(() => {
  return tm("shop.body.popular")
})
const brandIcons = computed(() => {
  return tm("shop.body.brandIcons")
})


const photo_images = ref([
  {image: photo_image1},
  {image: photo_image2},
  {image: photo_image3},
  {image: photo_image4},
  {image: photo_image5},
  {image: photo_image6},
  {image: photo_image7},
  {image: photo_image8},
  {image: photo_image9},
  {image: photo_image10},
  {image: photo_image11},
  {image: photo_image12},
])

// 更新屏幕尺寸的方法
const updateScreenSize = () => {
  screenSize.value = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  // console.log("屏幕尺寸", screenSize.value.width)
};

onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
  // 初始化屏幕尺寸
  updateScreenSize();
})

const getImage: string = computed(() => {
  if (screenSize.value.width <= 800) {
    return home_800;
  } else {
    return home_2048
  }
})


// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});

/**
 * 图片加载完成回调
 * @param val 图片地址
 */
const image_load = (val: any) => {
  console.log("Image load successfully")
  home_image1_load.value = true;
}

</script>

<template>
  <v-app>
    <v-card link elevation="0" class="rounded-0">
      <v-img
          class="mt-16"
          cover
          @load="image_load"
          :src="getImage"/>
      <v-skeleton-loader v-if="!home_image1_load" height="760">
      </v-skeleton-loader>
    </v-card>

    <!--    合作企业商标-->
    <v-sheet class="d-flex justify-center align-center my-2  flex-wrap py-6">
      <v-card
          width="192"
          elevation="0"
          class="rounded-0 text-center py-8">
        FEATURED IN
      </v-card>
      <v-card
          elevation="0"
          class="rounded-0 px-4 ">
        <v-img width="192" cover src="~/public/shop/AD_192x64.webp"/>
      </v-card>

      <v-card
          elevation="0"
          class="rounded-0 pa-4">
        <v-img width="192" cover src="~/public/shop/FRB_2d5a1fd8-30eb-4312-81b7-8dd7b1c90391_192x64.webp"/>
      </v-card>
      <v-card
          elevation="0"
          class="rounded-0 pa-4">
        <v-img width="192" cover src="~/public/shop/hgtv1_192x64.webp"/>
      </v-card>
    </v-sheet>

    <!--    选择你喜爱的风格-->
    <v-sheet color="#EEE9E3" class="d-flex flex-column pt-8 pb-10">
      <div class="text-center pt-16"><p class="font-serif text-3xl md:text-4xl lg:text-5xl">Choose your favorite
        style.</p>
        <p class="text-sm font-light py-3 tracking-tight"> OUR COLLECTIONS WERE DESIGNED WITH EVERYONE IN MIND.</p>
      </div>

      <!--幻灯组 https://vuetifyjs.com/zh-Hans/components/slide-groups -->
      <!--  遗留问题：手机自适应没有弄好，主要是改变v-sheet的width参数和v-card的width参数成一定的比例才行，也要考虑到和card的边框大小有关-->
      <v-sheet
          class="mx-auto"
          elevation="0"
          color="transparent"
          :width="getGroupWidth"
      >
        <v-slide-group
            class="pt-4 pb-0"
            selected-class="bg-primary"
            mandatory
            show-arrows
        >
          <v-slide-group-item
              v-for="item in style_images"
              v-slot="{ isSelected, toggle, selectedClass }"
          >
            <v-card
                elevation="0"
                rounded="0"
                link
                :class="['ma-3', selectedClass]"
                color="#F5F4F2"
                width="425"
            >
              <v-img :src="item.imageUrl"></v-img>

              <div class="text-center">
                <div class="pt-6 text-xl font-semibold text-[#413e3a]"> {{ item.title }}</div>
                <v-row class="d-flex align-center justify-center pt-2">
                  <div class="text-center">
                    <v-rating
                        v-model="item.star"
                        size="small"
                        readonly
                        half-increments
                        active-color="#bf9b81"
                        color="#C1C1C1"
                        density="compact"
                    ></v-rating>
                  </div>
                  <span class="font-thin text-xs pl-1">{{ item.star }}</span></v-row>
                <div class="font-thin text-xs pt-2">Sofa starts at <span class="font-semibold">{{ item.price }}</span>
                </div>
                <div class="font-thin text-xs italic py-1">or {{ item.monthPrice }}/month</div>
                <div class="font-thin text-xs py-1"> {{ item.fabric }}</div>
                <div class="font-thin text-xs"> {{ item.leg }}</div>
                <div class="pt-4 mb-10 text-[#786554] underline underline-offset-8"> {{ item.shop }}</div>
              </div>
            </v-card>
          </v-slide-group-item>
        </v-slide-group>
      </v-sheet>
    </v-sheet>

    <!--    Park展示-->
    <v-sheet color="#F5F4F2" class="pb-6">
      <div class="text-center pt-16">
        <p class="text-[#413E3A] font-serif text-3xl md:text-4xl lg:text-5xl"><span class="font-light">#</span>MyAlbanyPark
        </p>
        <p class="pt-3 pb-6 text-stone-500">Share your Albany Park style with us and get inspired! Add Your Photo</p>
      </div>
      <v-sheet
          color="transparent"
          class=" mx-auto"
          elevation="0"
      >
        <v-slide-group
            class="pt-4 pb-0"
            selected-class="bg-primary"
            mandatory
            show-arrows
        >
          <v-slide-group-item
              v-for="item in photo_images"
              v-slot="{ isSelected, toggle, selectedClass }"
          >
            <v-card
                rounded="0"
                link
                :class="['ma-3', selectedClass]"
                color="transparent"
                width="250"
                height="250"
                :image="item.image"
            >
              <div class="d-flex justify-end">
                <v-icon class="pt-4 pr-4" color="black" icon="mdi-instagram" size="small"></v-icon>
              </div>
            </v-card>
          </v-slide-group-item>
        </v-slide-group>
      </v-sheet>
    </v-sheet>

    <!-- Share展示-->
    <v-sheet color="#F5F4F2">
      <div class="py-16  text-center font-serif text-3xl md:text-4xl lg:text-5xl">What makes Albany Park unique?
      </div>
      <v-sheet color="transparent" class="d-flex justify-center pb-8">
        <v-sheet color="transparent" class="" width="1365">
          <v-row no-gutters class="d-flex flex-row-reverse">

            <v-col cols="12" md="6" class="d-flex">
              <v-card flat rounded="0" color="#EEE9E3" max-height="438" class="pa-12 d-flex align-center ">
                <div class="text-[#413E3A] ">
                  <h1 class="font-serif font-semibold lg:text-3xl text-xl py-8 md:text-2xl">Designed without
                    compromise.</h1>
                  <div class="text-sm leading-9">
                    <p class=" ">Albany Park is designed to be lived in, loved on, used often and enjoyed. Our
                      comfortable curated
                      collections and beautiful yet durable fabrics ensure quality beyond compare. Because when it comes
                      to
                      cozy,
                      you should never compromise.
                    </p>
                    <p class="py-10">Be comfortable. Be beautiful. Be at home.</p>
                  </div>
                </div>
              </v-card>
            </v-col>
            <v-col cols="12" md="6" class="d-flex align-center">
              <v-img :src="HP5050" max-height="438" cover/>
            </v-col>
          </v-row>
        </v-sheet>
      </v-sheet>

      <!--不同的服务-->
      <v-sheet color="transparent" class="">
        <h1 class="py-16  text-center font-serif text-3xl md:text-4xl lg:text-5xl">
          What else sets Albany Park apart?
        </h1>
        <!--  四个图标-->
        <div class="d-flex justify-center pb-8">
          <v-sheet color="transparent">
            <v-row class="">
              <v-col v-for="item in image_icons" :key="item.id" class="d-flex justify-center pa-0">
                <v-card width="334" class="py-6 px-4" color="transparent" flat>
                  <div class=" d-flex justify-center">
                    <div class="pb-8">
                      <v-img cover width="96" :src="item.url"/>
                    </div>
                  </div>
                  <div>
                    <h1 class="text-center">{{ item.title }}</h1>
                    <p class="text-center">{{ item.text }}</p>
                  </div>
                </v-card>
              </v-col>
            </v-row>
          </v-sheet>
        </div>
      </v-sheet>

      <!--    图片-->
      <v-card flat rounded="0" color="transparent" max-height="1172" max-width="2543" class=" my-16">
        <v-img cover
               :src="screenSize.width > 800?'https://cdn.tearful.cn/shop/banner/Homepage_img-DT-4N4A9235-ASE_v2-2500x1152_1984x928.jpg':'https://cdn.tearful.cn/shop/banner/Homepage_img-MB-4N4A9235-ASE_v2-1500x1500_800x.webp'"/>
      </v-card>

      <!--  七个推荐说明图标-->
      <v-sheet color="transparent">
        <h1 class="py-16  text-center font-serif text-3xl md:text-4xl lg:text-5xl">
          Owning quality furniture couldn't get any easier.
        </h1>

        <div class="d-flex justify-center">
          <v-sheet color="transparent" max-width="1100">
            <div class="pb-8 ">
              <v-row class="">
                <v-col v-for="item in qualityIcons" :key="item.id" class="d-flex justify-center pa-0">
                  <v-card class="pa-16" color="transparent"
                          flat>
                    <div class="d-flex justify-center">
                      <div class="pb-8">
                        <v-img cover width="118" :src="item.url"/>
                      </div>
                    </div>
                    <div>
                      <h1 class="text-center"> {{ item.title }}</h1>
                    </div>
                  </v-card>
                </v-col>
              </v-row>
            </div>
          </v-sheet>
        </div>
      </v-sheet>
    </v-sheet>

    <!--      动态图片-->
    <v-sheet color="#EEE9E3" class="py-16 d-md-flex justify-md-center">
      <v-sheet color="transparent" max-width="1365">
        <v-row no-gutters justify="center">
          <v-col cols="12" md="6" class="d-flex align-center px-2 px-md-12">
            <v-img src="https://cdn.tearful.cn/shop/home/ASSEMBLY_7608eecb-00c0-4267-986b-5a4725017a63_626x385.webp"
                   cover/>
          </v-col>
          <v-col cols="12" md="6" class="">
            <v-card flat rounded="0" color="transparent" class="px-4 px-md-12 d-flex align-center ">
              <div class="text-[#413E3A] ">
                <h1 class="font-serif font-semibold text-2xl py-8">Easy to Move + Assemble</h1>
                <div class="text-sm leading-9">
                  <p class=" ">Albany Park furniture comes packaged in apartment-friendly, space-conscious boxes that
                    can easily be maneuvered in stairwells, tight hallways and throughout any home. It literally takes
                    15 minutes to assemble an Albany Park - we promise!
                  </p>
                  <p class="pt-10">Watch how easy it is.</p>
                </div>
              </div>
            </v-card>
          </v-col>
        </v-row>
        <v-row no-gutters class="pt-8  mt-md-16 pt-md-8 flex-row-reverse">
          <v-col cols="12" md="6" class="d-flex align-center px-2 px-md-12">
            <v-img
                src="https://cdn.tearful.cn/shop/home/HP5050_feature-Lido_03_Ivory_Boucle_0833-928x832_640x576.webp"
                width="667" cover/>
          </v-col>
          <v-col cols="12" md="6" class="d-flex px-4 px-md-12">
            <v-card flat rounded="0" color="transparent" class=" d-flex align-center ">
              <div class="text-[#413E3A] ">
                <h1 class="font-serif font-semibold text-2xl py-8">Delivering Coziness</h1>
                <div class="text-sm leading-9">
                  <p class=" ">Get ready to embrace tremendous comfort! We want you to love your Albany Park furniture
                    and know it can take a few days to get acquainted with your new sofa. Take 30 days to lounge
                    around.
                    If you’re not swept off your feet, we’ll take everything back, no questions asked.
                  </p>
                </div>
              </div>
            </v-card>
          </v-col>
        </v-row>
      </v-sheet>
    </v-sheet>

    <!--    两个沙发图标-->
    <v-sheet color="#F5F4F2" class="d-flex justify-space-around">
      <v-sheet color="transparent">
        <div class="py-16 ">
          <v-row class="">
            <v-col v-for="item in buyers" :key="item.id" class="d-flex justify-center ">
              <v-card class="px-16" color="transparent"
                      flat>
                <div class="d-flex justify-center">
                  <div class="pb-8 ">
                    <v-img cover class="rounded-full" width="80" :src="item.imageUrl"/>
                  </div>
                </div>
                <div class="w-64 pa-8 ">
                  <p class="text-sm text-center font-thin text-[#413e3a] leading-normal">
                    {{ item.text }}
                  </p>
                  <h1 class="text-center leading-normal py-4"> {{ item.title }}</h1>
                  <div class="d-flex justify-center">
                    <v-rating
                        v-model="rating_five"
                        size="small"
                        readonly
                        half-increments
                        active-color="#bf9b81"
                        color="#C1C1C1"
                        density="comfortable"
                    ></v-rating>
                  </div>
                </div>
              </v-card>
            </v-col>
          </v-row>
        </div>
      </v-sheet>
    </v-sheet>

    <!--    流行沙发轮播图-->
    <v-sheet class="py-8 " color="#EEE9E3">
      <h1 class="py-8 text-center text-h3 font-serif">Most Popular</h1>

      <v-sheet
          color="transparent"
          class=" mx-auto py-8"
          elevation="0"
          width="1265"
      >
        <v-slide-group
            class="pt-4 pb-0"
            selected-class="bg-primary"
            mandatory
            show-arrows
        >
          <v-slide-group-item
              v-for="item in populars"
              v-slot="{ isSelected, toggle, selectedClass }"
          >
            <v-card
                flat
                rounded="0"
                link
                :class="['ma-3', selectedClass]"
                color="transparent"
                width="363"
                class="pb-8"
            >
              <v-img width="85" :src="item.saleUrl"></v-img>
              <v-img :src="item.imageUrl"></v-img>
              <div class="d-flex flex-column text-center pt-8">
                <h1 class="font-semibold py-2">{{ item.title }}</h1>
                <p>
                  <span class="text-sm font-thin px-1">from</span>
                  <span class="font-semibold px-1">{{ item.discount }}</span>
                  <span class="text-decoration-line-through text-[#C1C1C1]">{{ item.price }}</span></p>
              </div>
            </v-card>
          </v-slide-group-item>
        </v-slide-group>
      </v-sheet>

    </v-sheet>


    <!--    三个品牌信誉-->
    <v-sheet class="d-flex flex-row justify-center py-16" color="#F5F4F2">
      <v-card flat color="transparent" class="pa-4" v-for="item in brandIcons" :key="item.id" max-width="445">
        <div class="d-flex justify-center py-4">
          <div>
            <v-img width="108" :src="item.imageUrl"></v-img>
          </div>
        </div>
        <div class="text-center text-[#413e3a]">
          <h1 class="py-4 font-semibold">{{ item.title }}</h1>
          <p class="text-md font-thin">{{ item.text }}</p>
        </div>
      </v-card>
    </v-sheet>
    <!--    <v-card class="py-8">-->
    <!--      屏幕宽度:{{ screenSize.width }}-->
    <!--      屏幕高度:{{ screenSize.height }}-->
    <!--      &lt;!&ndash;      <div>&ndash;&gt;-->
    <!--      &lt;!&ndash;        <v-btn @click="setLocale('en')">英文</v-btn>&ndash;&gt;-->
    <!--      &lt;!&ndash;        <v-btn @click="setLocale('zh')">中文</v-btn>&ndash;&gt;-->
    <!--      &lt;!&ndash;        <p>{{ $tm('welcome') }}</p>&ndash;&gt;-->
    <!--      &lt;!&ndash;        <p>{{ $tm('messages') }}</p>&ndash;&gt;-->
    <!--      &lt;!&ndash;      </div>&ndash;&gt;-->
    <!--    </v-card>-->

    <!-----------------------------------------------------------------------------------------分隔符-------------------------------------------------------------------------------------------------------------->

    <!--    视频插件-->
        <div id="mse"></div>
  </v-app>

</template>

<style scoped>

</style>